<template>
  <div class="E-ranking-card">
    <div class="wrap-head">
      <div
        class="image bg-image-cover"
        v-lazy:background-image="`${item.coverImgUrl}?param=100y100`"
      />
      <div class="box-content">
        <p class="title text-ellipsis">{{item.name}}</p>
        <p class="content">{{item.description||'暂无描述'}}</p>
      </div>
    </div>
    <!-- <div class="wrap-body">
      <ul class="list">
        <li class="list-item" v-for="(item, index) in 8" :key="index">
          <span class="flex-index text-ellipsis">{{index+1}}</span>
          <span
            class="flex-content text-ellipsis"
          >首首首首首首首首首首首首首首首首首首首首首首首首首首首首</span>
          <span class="flex-right text-ellipsis">周姐夫姐是周姐夫姐是</span>
        </li>
      </ul>
    </div>-->
    <div class="wrap-footer">
      <span class="btn-right" @click="toDetailPage(item.id)">
        查看全部
        <i class="el-icon-arrow-right" />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      load: true
    };
  },
  methods: {
    toDetailPage(id) {
      this.$message('该功能暂未完善，敬请期待 ~');
      console.log(id);
    }
  }
};
</script>

<style lang="scss" scoped>
.E-ranking-card {
  @import "@/plug-in/_base.scss";
  margin: 10px 0;
  $border: 1px solid rgb(235, 236, 237);
  color: #888;
  border: $border;
  & > .wrap-head {
    display: flex;
    padding: 6px;
    $size: 80px;
    & > .image {
      position: relative;
      width: $size;
      height: $size;
      flex: 0 0 $size;
    }
    & > .box-content {
      height: $size;
      flex-grow: 1;
      padding-left: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      & > p {
        line-height: 20px;
        &.title {
          font-size: 16px;
          font-weight: 600;
          line-height: 30px;
        }
        &.content {
          @include row-dot-show(2);
          height: 40px;
        }
      }
    }
  }
  & > .wrap-body {
    border-left: $border;
    border-right: $border;
    .list {
      & > .list-item {
        display: flex;
        padding-right: 10px;
        overflow: hidden;
        &:nth-of-type(2n-1) {
          background: rgb(245, 245, 247);
        }
        &:nth-of-type(1),
        &:nth-of-type(2),
        &:nth-of-type(3) {
          & > .flex-index {
            color: rgb(211, 116, 81);
          }
        }
        &:hover {
          background: rgb(235, 236, 237);
        }
        & > .flex-index,
        & > .flex-content,
        & > .flex-right {
          display: inline-block;
          height: 25px;
          line-height: 25px;
        }
        & > .flex-index {
          font-weight: 600;
          text-align: right;
          font-size: 16px;
          width: 25px;
          flex: 0 0 25px;
        }
        & > .flex-content {
          flex-grow: 1;
          padding: 0 7px;
        }
        & > .flex-right {
          text-align: right;
          width: 72px;
          flex: 0 0 73px;
        }
      }
    }
  }
  & > .wrap-footer {
    text-align: right;
    line-height: 30px;
    padding: 0 10px;
    background: rgb(245, 245, 247);
    & > .btn-right {
      cursor: pointer;
      &:hover {
        color: #000;
      }
    }
  }
}
</style>
